<template>
  <a-drawer
    :visible="visible"
    :width="450"
    :footer="false"
    :mask-closable="false"
    :esc-to-close="false"
    @cancel="handleCancel"
  >
    <template #title> 邀请员工 </template>
    <div>
      <a-row style="width: 100%">
        <a-col :span="24">
          <a-form
            ref="employeeSignUpLinkCmd"
            :model="employeeSignUpLinkCmd"
            layout="inline"
          >
            <a-row style="width: 100%">
              <a-col :span="24">
                <a-form-item
                  field="departmentId"
                  label="部门"
                  :rules="[{ required: true, message: '部门不能为空' }]"
                  :validate-trigger="['change', 'blur']"
                >
                  <DepartmentCascaderSingle
                    v-model:department-id="employeeSignUpLinkCmd.departmentId"
                    :placeholder="`请选择待入职部门`"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row style="width: 100%" :gutter="8">
              <a-col :span="12">
                <a-button
                  type="primary"
                  html-type="primary"
                  :size="'mini'"
                  long
                  :loading="loading"
                  @click="signUpLink"
                >
                  生成注册链接
                </a-button>
              </a-col>
              <a-col :span="12">
                <a-tooltip
                  :content="'请耐心等待！功能加急开发中'"
                  :position="'tl'"
                  mini
                >
                  <a-button :type="'outline'" :size="'mini'" long>
                    生成注册二维码
                  </a-button>
                </a-tooltip>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
      <a-row style="padding-top: 30px; width: 100%">
        <a-col :span="24">
          <a-card :size="'small'" title="注册链接">
            <template #extra>
              <a-popover title="邀请员工入职" trigger="click">
                <a-button
                  :size="'mini'"
                  :type="'text'"
                  @click="copyEmployeeSignUpLink"
                >
                  复制
                </a-button>
                <template #content>
                  <p>员工注册链接已复制到剪贴板</p>
                  <p>快把注册链接发送给待入职的新同事吧～～～</p>
                </template>
              </a-popover>
            </template>
            <a-empty v-if="!employeeSignUpLink.shortLinkInstance" />
            <a-typography-text v-else>
              {{ formatUrl() }}
            </a-typography-text>
          </a-card>
        </a-col>
      </a-row>
      <a-row style="padding-top: 10px">
        <a-col :span="24">
          <a-card :size="'small'" title="注册二维码">
            <template #extra>
              <a-link>保存图片</a-link>
            </template>
            <a-empty />
          </a-card>
        </a-col>
      </a-row>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import DepartmentCascaderSingle from '@/components/business/department/cascader-sginle/index.vue';
  import { createEmployeeSignUpLink } from '@/api/idm/employee';
  import { EmployeeSignUpLinkView } from '@/types/idm/employee';
  import useClipboard from 'vue-clipboard3';
  import { Message } from '@arco-design/web-vue';

  const { toClipboard } = useClipboard();

  defineProps({
    visible: {
      type: Boolean,
      default() {
        return true;
      },
    },
  });
  const emit = defineEmits(['hidden']);

  const { loading, setLoading } = useLoading();
  const employeeSignUpLinkCmd = ref({
    departmentId: undefined,
  });
  const employeeSignUpLink = ref({} as EmployeeSignUpLinkView);

  const handleCancel = () => {
    emit('hidden', false);
  };

  const signUpLink = async () => {
    if (loading.value) return;
    if (!employeeSignUpLinkCmd.value.departmentId) {
      return;
    }
    setLoading(true);
    try {
      const res = await createEmployeeSignUpLink({
        linkType: 'SIGN_UP_EMP_PC',
        departmentId: employeeSignUpLinkCmd.value.departmentId,
      });
      employeeSignUpLink.value = res.data;
    } catch (err) {
      console.error('emp-sign-up-link, err:', employeeSignUpLinkCmd.value, err);
    } finally {
      setLoading(false);
    }
  };

  const generateSignUpQrcode = () => {};

  const formatUrl = () => {
    const url = employeeSignUpLink?.value?.shortLinkInstance?.sourceUrl;
    const location = window.location as Location;
    return `${location.protocol}//${location.host}${url}`;
  };
  const copyEmployeeSignUpLink = () => {
    try {
      const url = formatUrl();
      if (!url) {
        Message.warning('复制失败！请您先生成员工注册链接！');
        return;
      }
      toClipboard(formatUrl());
    } catch (e) {
      Message.error('复制失败！您的浏览器不支持复制功能！');
    }
  };
</script>
<style scoped lang="less">
  .search-panel {
    height: 100%;
    width: 100%;
    padding: 8px;
  }
</style>
